---
title: "Global Drag Handle (New)"
description: "Drag and drop blocks across the editor"
---

<Steps>

    <Step title="Install the extension">
    Install the extension with a package manager of your choice.

    ```NPM
    $ npm i tiptap-extension-global-drag-handle
    ```
    ```Yarn
    $ yarn add tiptap-extension-global-drag-handle
    ```

    In order to enjoy all the advantages of a drag handle, it is recommended to install the auto joiner extension as well, which allows you to automatically join various nodes such as 2 lists that are next to each other.

    ```NPM
    $ npm i tiptap-extension-auto-joiner
    ```
    ```Yarn
    $ yarn add tiptap-extension-auto-joiner
    ```

    </Step>

    <Step title="Add drag extension">
        ```tsx
        // extensions.ts
        import GlobalDragHandle from 'tiptap-extension-global-drag-handle'
        import AutoJoiner from 'tiptap-extension-auto-joiner' // optional

        export const defaultExtensions = [
            GlobalDragHandle,
            AutoJoiner, // optional
            // other extensions
        ];

        // editor.tsx
        const Editor = () => {
            return <EditorContent extensions={defaultExtensions} />
        }
        ```
    </Step>

    <Step title="Configure the extension">
        ```tsx
        //extensions.ts
        import GlobalDragHandle from 'tiptap-extension-global-drag-handle'
        import AutoJoiner from 'tiptap-extension-auto-joiner' // optional

        export const defaultExtensions = [
            GlobalDragHandle.configure({
                dragHandleWidth: 20,    // default

                // The scrollTreshold specifies how close the user must drag an element to the edge of the lower/upper screen for automatic 
                // scrolling to take place. For example, scrollTreshold = 100 means that scrolling starts automatically when the user drags an 
                // element to a position that is max. 99px away from the edge of the screen
                // You can set this to 0 to prevent auto scrolling caused by this extension
                scrollTreshold: 100     // default
            }),
            AutoJoiner.configure({
                elementsToJoin: ["bulletList", "orderedList"] // default
            }),
            // other extensions
        ];

        // editor.tsx
        const Editor = () => {
            return <EditorContent extensions={defaultExtensions} />
        }
        ```
    </Step>

    <Step title="Add styling">
        By default the drag handle is headless, which means it doesn't contain any css. If you want to apply styling to the drag handle, use the class "drag-handle" in your css file.

        Take a look at [this](https://github.com/steven-tey/novel/blob/main/apps/web/styles/prosemirror.css#L131) to see an example of drag handle styling.
    </Step>

</Steps>
